<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="交互" name="interaction" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
        <el-collapse  v-model="activeNames" accordion>
          
          <el-collapse-item title="图层" name="1">
            <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
              <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
            </el-form-item>
          </el-collapse-item> 

          <el-collapse-item title="头像设置" name="2">

            <el-form-item v-if="configData.chartOption.head.height !==undefined" label="头部高度占比">
              <el-slider v-model="configData.chartOption.head.height" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.marginTop !==undefined" label="头部上边距占比">
              <el-slider v-model="configData.chartOption.head.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.headImg.height!==undefined" label="头像高度占比">
              <el-slider v-model="configData.chartOption.head.headImg.height" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.headImg.width!==undefined" label="头像宽度占比">
              <el-slider v-model="configData.chartOption.head.headImg.width" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.headImg.marginLeft!==undefined" label="头像左边距">
              <el-slider v-model="configData.chartOption.head.headImg.marginLeft" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <!-- <el-form-item  label="头像图片">
             <image-gallary @getImg="getHeadImg"></image-gallary>
            </el-form-item> -->

          </el-collapse-item>

          

          

          <el-collapse-item title="信息行设置" name="6">

            <el-form-item v-if="configData.chartOption.infoItem.height!==undefined" label="整体高度占比">
              <el-slider v-model="configData.chartOption.infoItem.height" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.marginTop!==undefined" label="行上边距">
              <el-slider v-model="configData.chartOption.infoItem.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.textMarginTop!==undefined" label="文字上边距">
              <el-slider v-model="configData.chartOption.infoItem.textMarginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.textMarginLeft!==undefined" label="文字左边距">
              <el-slider v-model="configData.chartOption.infoItem.textMarginLeft" :min="0" :step="1" show-input></el-slider>
            </el-form-item>            

            <el-form-item v-if="configData.chartOption.infoItem.fontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.infoItem.fontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>            

            <el-form-item v-if="configData.chartOption.infoItem.fontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.infoItem.fontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.letterSpacing!==undefined" label="字体间距">
                <el-slider v-model="configData.chartOption.infoItem.letterSpacing" :min="0" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.fontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.infoItem.fontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item> 

            <el-form-item v-if="configData.chartOption.infoItem.fontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.infoItem.fontColor" show-alpha></el-color-picker>
            </el-form-item>           

            <el-form-item v-show="configData.chartOption.infoItem.background !==undefined" label="字体背景">
              <el-radio-group v-model="configData.chartOption.infoItem.background">
                <el-radio label="color">背景色</el-radio>
                <el-radio label="img">背景图</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.infoItem.backgroundColor!==undefined" label="背景颜色">
              <el-color-picker v-model="configData.chartOption.infoItem.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item  label="背景图">
              <image-gallary @getImg="getInfoImg"></image-gallary>
            </el-form-item>
            

          </el-collapse-item>

          <el-collapse-item title="详细行设置" name="7">

            <el-form-item v-if="configData.chartOption.detailItem.height!==undefined" label="整体高度占比">
              <el-slider v-model="configData.chartOption.detailItem.height" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.marginTop!==undefined" label="行上边距">
              <el-slider v-model="configData.chartOption.detailItem.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.textMarginTop!==undefined" label="文字上边距">
              <el-slider v-model="configData.chartOption.detailItem.textMarginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.fontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.detailItem.fontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>              

            <el-form-item v-if="configData.chartOption.detailItem.fontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.detailItem.fontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.letterSpacing!==undefined" label="字体间距">
                <el-slider v-model="configData.chartOption.detailItem.letterSpacing" :min="0" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.fontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.detailItem.fontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>             

            <el-form-item v-if="configData.chartOption.detailItem.fontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.detailItem.fontColor" show-alpha></el-color-picker>
            </el-form-item>           

            <el-form-item v-show="configData.chartOption.detailItem.background !==undefined" label="字体背景">
              <el-radio-group v-model="configData.chartOption.detailItem.background">
                <el-radio label="color">背景色</el-radio>
                <el-radio label="img">背景图</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.detailItem.backgroundColor!==undefined" label="背景颜色">
              <el-color-picker v-model="configData.chartOption.detailItem.backgroundColor" show-alpha></el-color-picker>
            </el-form-item>

            <el-form-item  label="背景图">
              <image-gallary @getImg="getDetailImg"></image-gallary>
            </el-form-item>


          </el-collapse-item>

          <el-collapse-item title="提示框设置" name="3">

            <el-form-item v-if="configData.chartOption.head.tipImg.sync !==undefined" label="是否与提示框文字同步">
              <el-switch v-model="configData.chartOption.head.tipImg.sync"></el-switch>
            </el-form-item>

            <el-form-item v-show="configData.chartOption.head.tipImg.show !==undefined" label="是否显示">
              <el-radio-group v-model="configData.chartOption.head.tipImg.show">
                <el-radio label="block">显示</el-radio>
                <el-radio label="none">隐藏</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipImg.height!==undefined" label="提示框高度占比">
              <el-slider v-model="configData.chartOption.head.tipImg.height" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipImg.width!==undefined" label="提示框宽度占比">
              <el-slider v-model="configData.chartOption.head.tipImg.width" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipImg.marginLeft!==undefined" label="提示框左边距">
              <el-slider v-model="configData.chartOption.head.tipImg.marginLeft" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipImg.marginTop!==undefined" label="提示框上边距">
              <el-slider v-model="configData.chartOption.head.tipImg.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item  label="提示框图片">
              <image-gallary @getImg="getTipImg"></image-gallary>
            </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="提示框文字" name="4">

            <el-form-item v-if="configData.chartOption.head.tipText.fontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.head.tipText.fontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipText.fontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.head.tipText.fontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipText.fontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.head.tipText.fontColor" show-alpha></el-color-picker>
            </el-form-item> 

            <el-form-item v-if="configData.chartOption.head.tipText.letterSpacing!==undefined" label="字体间距">
                <el-slider v-model="configData.chartOption.head.tipText.letterSpacing" :min="0" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipText.fontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.head.tipText.fontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>                  

            <el-form-item v-if="configData.chartOption.head.tipText.marginLeft!==undefined" label="文字左边距">
              <el-slider v-model="configData.chartOption.head.tipText.marginLeft" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.head.tipText.marginTop!==undefined" label="文字上边距">
              <el-slider v-model="configData.chartOption.head.tipText.marginTop" :min="-50" :step="1" show-input></el-slider>
            </el-form-item>
            

          </el-collapse-item>          

          <el-collapse-item title="名称设置" name="5">

            <el-form-item v-if="configData.chartOption.name.fontFamily!==undefined" label="字体名称">
              <el-select v-model="configData.chartOption.name.fontFamily" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontFamilys"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.name.fontSize!==undefined" label="字体大小">
              <el-slider v-model="configData.chartOption.name.fontSize" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.name.fontColor!==undefined" label="字体颜色">
              <el-color-picker v-model="configData.chartOption.name.fontColor" show-alpha></el-color-picker>
            </el-form-item>    

            <el-form-item v-if="configData.chartOption.name.letterSpacing!==undefined" label="字体间距">
                <el-slider v-model="configData.chartOption.name.letterSpacing" :min="0" :max="200" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.name.fontWeight!==undefined" label="文字粗细">
              <el-select v-model="configData.chartOption.name.fontWeight" placeholder="请选择">
                <el-option
                  v-for="(item,index) in fontWeights"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>       

            <el-form-item v-if="configData.chartOption.name.marginLeft!==undefined" label="名称左边距">
              <el-slider v-model="configData.chartOption.name.marginLeft" :min="1" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.name.marginTop!==undefined" label="名称上边距">
              <el-slider v-model="configData.chartOption.name.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.name.marginBottom!==undefined" label="名称下边距">
              <el-slider v-model="configData.chartOption.name.marginBottom" :min="0" :step="1" show-input></el-slider>
            </el-form-item>
            

          </el-collapse-item>

          <el-collapse-item title="卡片属性设置" name="8">
            <el-form-item v-if="configData.chartOption.numOfCol!==undefined" label="卡片列数">
              <el-slider v-model="configData.chartOption.numOfCol" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.marginLeft!==undefined" label="横向间距(%)">
              <el-slider v-model="configData.chartOption.marginLeft" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

            <el-form-item v-if="configData.chartOption.marginTop!==undefined" label="纵向间距(%)">
              <el-slider v-model="configData.chartOption.marginTop" :min="0" :step="1" show-input></el-slider>
            </el-form-item>

          </el-collapse-item>

          <el-collapse-item title="动画" name="9">
            <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
              <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                <el-option
                  v-for="item in animateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-collapse-item>
        </el-collapse>

        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="数据源类型">
            <el-select v-model="configData.chartOption.dataSourceType" placeholder="请选择">
                <el-option
                  v-for="item in dataSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

          <Databasewebsocket v-show="configData.chartOption.dataSourceType === 'websocket'" 
          :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></Databasewebsocket>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'static'" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <!-- <el-form-item v-show="configData.chartOption.dataSourceType === 'url'" label="接口地址">
            <el-input type="textarea" :rows="5" placeholder="请输入接口地址" v-model="interfaceUrl" @blur.prevent="changeInterfaceUrl()">
            </el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'url'" label="请求方式">
            <el-radio-group v-model="configData.chartOption.requestMethod">
              <el-radio label="GET"></el-radio>
              <el-radio label="POST"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'url'" label="请求参数">
            <el-input type="textarea" :rows="5" placeholder="请输入请求参数" v-model="requestParameters" @blur.prevent="changeRequestParameters()">
            </el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'url'" label="刷新时间">
            <el-input-number v-model="configData.chartOption.timeout" controls-position="right"  :step="1000"></el-input-number>
          </el-form-item> -->

          <api-source v-show="configData.chartOption.dataSourceType === 'url'" 
            :interfaceUrl="interfaceUrl" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout"
            @changeApi="changeApi" ></api-source>

          <!--<el-form-item v-show="configData.chartOption.dataSourceType === 'form'" label="表格文件">
            <el-select v-model="formSource.id" placeholder="请选择" @change="formChange">
              <el-option
                v-for="item in formSourceList"
                :key="item.id"
                :label="item.fileName"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form'" label="表格模板">
            <a href="../../template/颜色块表格模板.xlsx" style="color:#1890ff;cursor:pointer" download="卡片表格模板.xlsx">颜色块表格模板下载</a>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form'" label="">
            <el-button type="success" @click="addClick" >新增表格数据</el-button>
            <el-button type="primary" @click="updateClick" >更新表格数据</el-button>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form' && formSourceFlag === 'update'" label="表格名称">
            <el-input placeholder="请输入内容" v-model="formSource.fileName" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form' && formSourceFlag === 'update'" label="文件连接">
            <a :href="formSource.fileUrl" style="color:#1890ff;cursor:pointer" download="颜色块表格模板.xlsx">{{formSource.fileName}}</a>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form' && formSourceFlag === 'add'" label="表格名称">
            <el-input placeholder="请输入内容" v-model="addFileName" ></el-input>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form' && formSourceFlag !== null" label="上传文件">
            <el-upload
              class="upload-demo"
              drag
              action
              ref="upload"
              :limit="1"
              :http-request="httpRequest"
              :show-file-list="true" 
              :before-upload="beforeUpload"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              >
              <i class="el-icon-upload"></i>
            </el-upload>
          </el-form-item>

          <el-form-item v-show="configData.chartOption.dataSourceType === 'form' && formSourceFlag !== null" >
            <el-button type="primary" @click="formSubmit">确定</el-button>
            <el-button type="info" @click="formCancel" >取消</el-button>
          </el-form-item> -->
          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>
        </el-form>
         <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>

        <!-- 组件交互 -->
        <el-form v-show="currentTab === 'interaction'" size="small" label-width="90px">
          <el-form-item  label="是否开启图表联动">
              <el-switch v-model="configData.chartOption.isLink"  @change="isLinkChange"/>
          </el-form-item>
           
            <el-form-item v-show="configData.chartOption.isLink===true"  label="设置">
              <div v-if="linkageRows.length > 0" style="height:300px;overflow:auto">
                <div v-show="configData.chartOption.isLink===true"  v-for="(item, index) in linkageRows" :key="index" class="linkage-item">
                
                  <label class="linkage-label">输入要触发联动的详细信息行内容：</label>
                  <el-input v-model="item.field" placeholder="内容" style="width: 194px;"  @blur.prevent="changeLinkageRows()"/>
                
                  <label class="linkage-label">请选择与本行联动的下级图表：</label>
                  <el-select v-model="item.bindingChart" multiple placeholder="请选择"  @change="changeLinkageRows()">
                    <el-option
                        v-for="item in chartList"
                        :key="item.customId"
                        :label="item.layerName"
                        :value="item.customId">
                      </el-option>
                  </el-select>
                  <label class="linkage-label">请填写参数名：</label>
                  <el-input v-model="item.paramName" placeholder="参数名" style="width: 194px;"  @blur.prevent="changeLinkageRows()"/>
                
                  <div class="delete-icon" @click="removeLinkageItem(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </div>        
            <div>
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addLinkageItem">
                添加列表
              </el-button>
            </div>
          </el-form-item>

           <el-form-item  v-show="configData.chartOption.isLink===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">参数名=选中值</i></span>
            </div>            
          </el-form-item> 


          <!-- 组件下钻 -->

          <el-form-item  label="是否开启图表下钻">
              <el-switch v-model="configData.chartOption.isDrillDown" @change="isDrillDownChange"/>
          </el-form-item>

            <el-form-item v-show="configData.chartOption.isDrillDown===true"  label="设置">
              <div v-if="drillRows.length > 0" style="height:350px;overflow:auto">
                <div v-show="configData.chartOption.isDrillDown===true"  v-for="(item, index) in drillRows" :key="index" class="linkage-item">
                
   
                  <label class="linkage-label">输入要触发联动的详细信息行内容：</label>
                  <el-input v-model="item.field" placeholder="内容" style="width: 194px;"  @blur.prevent="changeDrillRows()"/>

                  <label class="linkage-label">请选择与本列联动的下级图表：</label>
                  <el-select v-model="item.bindingChart" clearable filterable placeholder="请选择" @change="drillDownChartChange($event,index)">
                    <el-option
                      v-for="item in drillDownOptions"
                      :key="item.chartType"
                      :label="item.layerName"
                      :value="item.chartType">
                    </el-option>
                  </el-select>
                  <label class="linkage-label">请填写参数名：</label>
                  <el-input v-model="item.paramName" placeholder="参数名" style="width: 194px;"  @blur.prevent="changeDrillRows()"/>

                  <label class="linkage-label">弹窗背景颜色：</label>
                  <el-color-picker v-model="item.drillBgColor" show-alpha @change="changeDrillRows()"/>

                  <drill-down-config :drillDownDialogFlag.sync="item.drillDownDialogFlag" :drillDownDialogData="item.drillDownChartOption"/>
                  <label class="linkage-label">设置：</label>

                  <el-button type="primary" @click="DrillDownClick(index)">前去设置</el-button>

                
                  <div class="delete-icon" @click="removeDrillItem(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </div>        
            <div>
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addDrillItem">
                添加列表
              </el-button>
            </div>

          </el-form-item> 

           <el-form-item  v-show="configData.chartOption.isDrillDown===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">参数名=选中值</i></span>
            </div>            
          </el-form-item>

          <!-- 是否开启图表远程控制 -->
        
          <el-form-item  label="是否开启图表远程控制">
                <el-switch v-model="configData.chartOption.isRemote" />
          </el-form-item>
           
          <el-form-item v-show="configData.chartOption.isRemote===true"  label="设置">
              <div v-if="remoteRows.length > 0" style="height:220px;overflow:auto">
                <div v-show="configData.chartOption.isRemote===true"  v-for="(item, index) in remoteRows" :key="index" class="linkage-item">
                
                  <label class="linkage-label">输入要触发联动的详细信息行内容：</label>
                  <el-input v-model="item.field" placeholder="内容" style="width: 194px;"  @blur.prevent="changeRemoteRows()"/>
                  
                  <label class="linkage-label">请选择触发远程控制的接口：</label>
                  <el-select v-model="item.interfaceKey" placeholder="请选择"  @change="setInterfaceKey(item.interfaceKey,index)">
                    <el-option
                      v-for="item in socketOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>

                  <label class="linkage-label">请填写参数名：</label>
                  <el-input v-model="item.paramName" placeholder="参数名" style="width: 194px;"  @blur.prevent="changeRemoteRows()"/>
                
                  <div class="delete-icon" @click="removeRemoteItem(index)">
                    <i class="el-icon-remove-outline" />
                  </div>
                </div>
              </div>        
            <div>
              <el-button style="padding-bottom: 0" icon="el-icon-circle-plus-outline" type="text" @click="addRemoteItem">
                添加列表
              </el-button>
            </div>
          </el-form-item>
          <el-form-item  v-show="configData.chartOption.isRemote===true" label="*参数说明">
            <div class="el-form-item__content">
              <span style="word-wrap: break-word;"><i style="color:#F00;">绑定列值=选中值</i></span>
            </div>            
          </el-form-item>
        </el-form>
        
      </el-scrollbar>
    </div>
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>  
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import { dataSourceOptions, dataBaseOptions } from '../../ComponentsConfig'
import draggable from 'vuedraggable'
import { listFormsource, addFormsource, updateFormsource, getFormsource } from '@/api/tool/datav/formsource'
import Databasewebsocket from './chartDB/Databasewebsocket'
import ImageGallary from './imageGallary/imageGallary'
import { getLinkChart} from "../../util/LinkageChart";
import DrillDownConfig from './drillDown/drillDownConfig'
import { drillDownOptions, getDrillDownOption } from '@/views/tool/datav/components/config/drillDown/drillDown'
import { listSysWebsocket} from "@/api/tool/SysWebsocket";
import ApiSource from './chartDB/ApiSource'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";

export default {
  components: {
    draggable,
    DrillDownConfig,
    Databasewebsocket,
    ImageGallary,
    ApiSource,
    DataEditor
  },
  props: ["costomData", "drawingList"],
  data() {
    return {
      fontFamilys:this.fontFamilys,
      fontWeights:['normal','bold','bolder','lighter'],
      activeNames: ['1'],
      currentTab: 'field',
      configData: this.costomData,
      chartList: this.drawingList,
      linkageRows: this.costomData.chartOption.linkageRows != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).linkageRows : [{
          field: '',
          bindingChart: [],
          paramName: '',
        }],
      drillRows: this.costomData.chartOption.drillRows != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).drillRows : [{
          field: '',
          bindingChart: '',
          paramName: '',
          drillBgColor: 'rgba(4, 12, 121, 1)',
          drillDownDialogFlag : false,
          drillDownChartOption: new Object()
        }],
      remoteRows: this.costomData.chartOption.remoteRows != undefined ? JSON.parse(JSON.stringify(this.costomData.chartOption)).remoteRows : [{
          field: '',
          paramName: '',
          interfaceKey: '',
          interfaceUrl: '',
          interfaceName: '',
        }],
      animateOptions,
      dataSourceOptions,
      dataBaseOptions,
      drillDownOptions,
      staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '123',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      formSourceFlag: null,
      formSource: {
        id: this.costomData.chartOption.formSource != undefined ? this.costomData.chartOption.formSource.id : '',
        fileName: this.costomData.chartOption.formSource != undefined ? this.costomData.chartOption.formSource.fileName : '',
        fileUrl: this.costomData.chartOption.formSource != undefined ? this.costomData.chartOption.formSource.fileUrl : '',
        chartType: "card"
      },
      formSourceList: [],
      formQueryParam: {
        chartType: "card"
      },
      fileList: [],
      addFileName: '',
      chartList: this.drawingList,
      //ws接口列表
      socketOptions:[],
      aceKey:Math.random(),
      open:false,
    }
  },
  //页面加载完执行
  mounted() {
    // this.getFormsourceList();
    //获取可联动组件列表
    let chartList = getLinkChart(this.drawingList);
    this.chartList = chartList;
    //ws接口列表
    this.getSocketOptions();
  },
  computed: {

  
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
        if (newVal.chartOption.formSource != undefined) {
          this.formSource = newVal.chartOption.formSource;
        } else {
          this.formSource = JSON.parse(JSON.stringify( {id: '',fileName: '',fileUrl: '',chartType: "card"} ));
        }
      }
    }
  },
  methods: {
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
          //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
          this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(this.staticDataValue));

      } else {
          //this.configData.interfaceURL = this.staticDataValue;
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);

      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, 'interfaceURL', this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(this.configData.chartOption, 'requestParameters', this.requestParameters);
    },
    changeApi(val){
      if(val.type == "interfaceUrl"){
        this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
      }else if(val.type == "requestParameters"){
        this.$set(this.configData.chartOption, 'requestParameters', val.arr);
      }else if(val.type == "requestMethod"){
        this.$set(this.configData.chartOption, 'requestMethod', val.arr);
      }else if(val.type == "token"){
        this.$set(this.configData.chartOption, 'token', val.arr);
      }else if(val.type == "timeout"){
        this.$set(this.configData.chartOption, 'timeout', val.arr);
      }
    },    
    //获取表格数据下拉框
    getFormsourceList() {
      listFormsource(this.formQueryParam).then((response) => {      
        this.formSourceList = response.rows;
      });
    },
    formChange(option) {
      getFormsource(option).then(response => {
        if (response.code == 200) {
          this.formSource.id = response.data.id;
          this.formSource.fileName = response.data.fileName;
          this.formSource.fileUrl = response.data.fileUrl;
          this.$set(this.configData.chartOption, 'formSource', JSON.parse(JSON.stringify( this.formSource )));
        }
      })
    },
    updateClick() {
      this.formSourceFlag = 'update';
    },
    addClick() {
      this.formSourceFlag = 'add';
    },
    //自定义上传,重写文件上传方法,覆盖原有的上传方法，将上传的文件依次添加到fileList数组中
    httpRequest(option) {
        this.fileList.push(option);
        this.msgSuccess("成功上传至浏览器缓存");
    },
    // 上传预处理
    beforeUpload(file) {
      const Xls = file.name.split('.'); 
      if(Xls[1] === 'xls'||Xls[1] === 'xlsx'){
        return file;
      }else {
        this.$message.error('请上传excel格式的文件!')
        return false;
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleRemove(file, fileList) {
      this.fileList = [];
    },
    formCancel() {
      this.formSourceFlag = null;
      this.fileList = [];
      this.$refs.upload.clearFiles()
    },
    formSubmit() {
      if(this.fileList.length == 0) {
        this.$message({
          message: '请上传文件在进行提交！',
          type: 'warning'
        });
        return false;
      }
      // 使用form表单的数据格式
      let paramsData = new FormData()
      // 将上传文件数组依次添加到参数paramsData中
      this.fileList.forEach((it, index) => {
        //paramsData.append(`files[${index}]`, it.file)
        paramsData.append('file', it.file); // 因为要上传多个文件，所以需要遍历一下才行
      });
      paramsData.append('chartType', this.formSource.chartType)
      // 将表单数据添加到参数paramsData中
      if(this.formSourceFlag == 'update') {
        paramsData.append('id', this.formSource.id)
        paramsData.append('fileName', this.formSource.fileName)
        paramsData.append('fileUrl', this.formSource.fileUrl)
        updateFormsource(paramsData).then(response => {
          //  console.log(response);
          if (response.code == 200) {
              this.formSourceFlag = null;
              this.fileList = [];
              this.$refs.upload.clearFiles()
              this.msgSuccess("更新成功");
              //this.getFormsourceList();
              this.formSource.id = response.data.id;
              this.formSource.fileName = response.data.fileName;
              this.formSource.fileUrl = response.data.fileUrl;
              this.$set(this.configData.chartOption, 'formSource', this.formSource);
          }
        });
      } else if(this.formSourceFlag == 'add') {
        paramsData.append('fileName', this.addFileName)
        addFormsource(paramsData).then(response => {
          //  console.log(response);
          if (response.code == 200) {
            this.addFileName = '';
            this.formSourceFlag = null;
            this.fileList = [];
            this.$refs.upload.clearFiles()
            this.getFormsourceList();
            this.msgSuccess("新增成功");
            this.formSource.id = response.data.id;
            this.formSource.fileName = response.data.fileName;
            this.formSource.fileUrl = response.data.fileUrl;
            this.$set(this.configData.chartOption, 'formSource', this.formSource);
          }
        });
      }
      
    },
    getInterfaceKey(val){
      this.$set(this.configData.chartOption, 'interfaceKey', val);
    },
    getInfoImg(val){
      this.$set(this.configData.chartOption.infoItem, 'backgroundImg', val);
    },
    getDetailImg(val){
      this.$set(this.configData.chartOption.detailItem, 'backgroundImg', val);
    },
    getHeadImg(val){
      this.$set(this.configData.chartOption.head.headImg, 'src', val);
    },
    getTipImg(val){
      this.$set(this.configData.chartOption.head.tipImg, 'src', val);
    },
    isLinkChange() {
      if (this.configData.chartOption.isLink == true) {
        this.$set(this.configData.chartOption, 'isDrillDown', false);
        //this.configData.chartOption.isDrillDown == false;
      }
    },
    addLinkageItem(){
      this.linkageRows.push({
        field: '',
        bindingChart: [],
        paramName: '',
      })
    },
    removeLinkageItem(index){
      let newRows = this.linkageRows;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'linkageRows',JSON.parse(JSON.stringify( newRows)));

    },
    changeLinkageRows() {
      this.$set(this.configData.chartOption, 'linkageRows',JSON.parse(JSON.stringify( this.linkageRows)));
    },
    addDrillItem(){
      this.drillRows.push({
        field: '',
        bindingChart: '',
        paramName: '',
        drillBgColor: 'rgba(4, 12, 121, 1)',
        drillDownDialogFlag : false,
        drillDownChartOption: new Object()
      })
    },
    removeDrillItem(index){
      let newCols = this.drillRows;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'drillRows',JSON.parse(JSON.stringify( newCols)));

    },
    changeDrillRows() {
      this.$set(this.configData.chartOption, 'drillRows',JSON.parse(JSON.stringify( this.drillRows)));
    },
    isDrillDownChange() {
      //与图表联动互斥
      if (this.configData.chartOption.isDrillDown == true) {
        this.$set(this.configData.chartOption, 'isLink', false);
      }
    },
    drillDownChartChange(value,index) {

      const chartOption = getDrillDownOption(value, this.configData.chartOption.theme, this.configData.chartOption.bindingDiv + 'rows' + index);
      
      if(chartOption != null){
        chartOption.x = -1;
        chartOption.y = -1;
        chartOption.width = 900;
        chartOption.height = 600;

      }   

      this.drillRows[index].drillDownChartOption = chartOption;

      this.$set(this.configData.chartOption, 'drillRows',JSON.parse(JSON.stringify( this.drillRows)));  

    },
    DrillDownClick(index) {
      if (this.drillRows[index].drillDownChartOption == undefined || this.drillRows[index].drillDownChartOption == null) {
        this.$notify({
          title: '警告',
          message: '请选择关联的下钻组件',
          type: 'warning'
        });
        return false;
      }
      this.drillRows[index].drillDownDialogFlag = true;
    },
    changeRemoteRows() {
      this.$set(this.configData.chartOption, 'remoteRows',JSON.parse(JSON.stringify( this.remoteRows)));
    },
    addRemoteItem(){
      this.remoteRows.push({
        field: '',
        paramName: '',
        interfaceKey: '',
        interfaceUrl: '',
        interfaceName: '',
      })
    },
    removeRemoteItem(index){
      let newCols = this.remoteRows;
      newCols.splice(index, 1);
      this.$set(this.configData.chartOption, 'remoteRows',JSON.parse(JSON.stringify( newCols)));

    },
    getSocketOptions(){
      listSysWebsocket().then(response => {
          for(let res of response.rows){
              this.socketOptions.push({
                  label:res.interfaceName,
                  value:res.interfaceKey,
                  url:res.interfaceUrl
              })
          }
      })
    },
    setInterfaceKey(key,index){
        for(let item of this.socketOptions){
            if (item.value == key){
                this.remoteRows[index].interfaceUrl = item.url
                this.remoteRows[index].interfaceName = item.label
            }
        }

        this.$set(this.configData.chartOption, 'remoteRows',JSON.parse(JSON.stringify( this.remoteRows))); 
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }
  }
}
</script>

<style lang="scss" scoped>
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
/deep/ .select-item .el-input--medium .el-input__inner {
    height: 32px;
    width: 90px;
}
.el-form-item__label{
  width:30px
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
/deep/ .el-radio {
  margin-right: 15px;
}
/deep/ .center-tabs .el-tabs__item {
    width: 25%;
    text-align: center;
}
/deep/ .el-upload-dragger {
    background-color: #fff;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    box-sizing: border-box;
    width: 225px;
    height: 180px;
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>